<template>
  <div class="clothingList">
    <div class="backBox">
      <div class="leftBox" @click="onClickLeft">
        <van-icon name="arrow-left" class="backIcon" />
        <span>返回</span>
      </div>
      <div class="title">线外任务</div>
      <!-- <div class="loginOut" @click="toLogin">
        <van-icon class="cross" name="cross" />
      </div> -->
    </div>
    <div class="content">
      <div class="taskContainer">
        <div class="taskTitle">制衣单</div>
        <div class="taskBox">
          <div class="taskItem" v-for="(item,index) in planList" :key="index">
            <div class="itemLeft">
              <div class="item">
                <span>生产单号</span>
                <span>{{item.moNo}}</span>
              </div>
              <div class="item">
                <span>款号</span>
                <span>{{item.styleNo}}</span>
              </div>
              <div class="item">
                <span>颜色/尺码</span>
                <span>{{item.color}}/{{item.sizeName?item.sizeName:'-'}}</span>
              </div>
              <!-- <div class="item">
                <span>尺码</span>
                <span>{{item.sizeName}}</span>
              </div> -->
              <div class="item">
                <span>目标产量</span>
                <span>{{item.destQty}}</span>
              </div>
              <div class="item">
                <span>已投件数</span>
                <span>{{item.investedQty}}</span>
              </div>
              <div class="item">
                <span>准备数</span>
                <span>{{item.prepareQty}}</span>
              </div>
              <div class="item">
                <span>未完成数</span>
                <span>{{item.remainderQty}}</span>
              </div>
              <!-- <div class="item">
                <span>挂片比例</span>
                <span>{{((item.matchedNum/item.matchNum)%100).toFixed(2)}}%</span>
              </div> -->
            </div>  
            <div class="itemRight">
              <van-image width="135" height="180" radius="5" :src="item.imagePath" alt="" />
            </div>
            <div class="rankBox"></div>
            <span class="rankNo">{{index<10?'0'+(index+1):index}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPlanList,loginOutApi } from '@/api/loginApi'
import { Dialog } from 'vant'
export default {
  data() {
    return {
      planList:[]
    }
  },
  mounted(){
    this.fetchPlanList()
  },
  methods:{
    toLogin(){
      Dialog.confirm({
        title: '提示',
        message: '确认要退出吗?',
        confirmButtonColor: '#1989fa',
      })
        .then(() => {
          let positionIndex = localStorage.getItem('positionIndex')
          if(positionIndex == 0){
            this.loginMsg = JSON.parse(localStorage.getItem('loginMsg'))
          }else{
            this.loginMsg = JSON.parse(localStorage.getItem('loginMsgPare'))
          }
          loginOutApi({lineNumber:this.loginMsg.lineNumber,stationNum: this.loginMsg.stationNum}).then(res =>{
            if(res.data.code == 0){
              this.$router.push('/login')
            }else{
              this.$router.push('/login')
            }
          }).catch(() =>{
            this.$router.push('/login')
          })
        })
        .catch(() => {
          // on cancel
          //  this.$router.push('/login')
        });
      
    },
    // 获取上线计划
    fetchPlanList(){
      getPlanList().then(res =>{
        this.planList = res.data
      })
    },
    onClickLeft(){
      this.$router.go(-1)
    },
    toSewing(){
      this.$router.push('/sewing/sewingHome')
    },
  }
}
</script>

<style lang="less" scoped>
  .clothingList{
    background: #E7F3F9;
    height: 100%;
    display: flex;
    flex-direction: column;
    .backBox{
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      position: relative;
      background: #fff;
      height: 70px;
      line-height: 70px;
      font-size: 24px;
      .leftBox{
        position: absolute;
        left: 20px;
        display: flex;
        align-items: center;
        .backIcon{
          margin-right: 4px;
          font-size: 26px;
        }
      }
      .loginOut{
        height: 70px;
          width: 100px;
          background-image: url('../..//assets/img/redBgc.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          right: 0;
          .cross{
            font-size: 40px;
            color: #fff;
            position: relative;
            right: -5px;
          }
      }
    }
    .content{
      flex: 1;
      overflow: scroll;
      display: flex;
      flex-direction: column;
      margin: 15px;
      .taskContainer{
        background: #fff;
        padding: 15px;
        box-sizing: border-box;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: scroll;
        .taskTitle{
          font-size: 22px;
          border-bottom: 1px solid #007DBC;
          color: #007DBC;
          padding-bottom: 10px;
        }
        .taskBox{
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          overflow: scroll;
          .taskItem{
            width: 33%;
            display: flex;
            margin-top: 10px;
            position: relative;
            margin-bottom: 0px;
            .itemLeft{
              flex-shrink: 0;
              margin-right: 20px;
              .item{
                display: flex;
                font-size: 19px;
                line-height: 27.5px;
                span:first-child{
                  width: 95px;
                  text-align: right;
                  margin-right: 15px;
                }
                span:last-child{
                  color: #007DBC;
                }
              }
            }
            .rankBox{
              height: 80px;
              width: 47px;
              border: 0px solid transparent;
              border-top: 48px solid #007DBC;
              border-left: 14px solid transparent;
              position: absolute;
              right: 0;
            }
            .rankNo{
              position: absolute;
              color: #fff;
              right: 15px;
              top: 13px;
              font-size: 20px;
            }
          }
        }
      }
    }
  }
</style>